<template>
	<view class="recommendHouse" style="margin: 15px 0;" @tap="gohouse">
		<view class="recommendHouseImg">
			<view class="">
				<image src="../static/client/timg.jpg" mode=""></image>
				<view>必看好房</view>
			</view>
		</view>
		<view class="recommendHouseText">
			<text class="recommendHouseTitle">南山科技园 5室1厅</text>
			<p>185.2m/东南/高楼层 共30层</p>
			<view class="recommendHouse">
				<view class="recommendHouseTag">
					青年
				</view>
				<view class="recommendHouseTag">
					青年asd
				</view>
				<view class="recommendHouseTag">
					青年sd
				</view>
			</view>
			<view style="margin-top: 0px;" class="fixed">
				<text style="color:#FF4444;">
					<text style="font-size: 16px;font-weight: bold;">2.58</text>
					万/月
				</text>
				<p class="right">水电费：5000/月</p>
			</view>
		</view>
	</view>
</template>

<script>
  export default {
    data() {
      return {}
    },
    methods: {
      gohouse() {
        console.log(1)
        uni.navigateTo({
          url: '/pages/house/house',
          complete: function (res) {
            console.log(res)
          }
        });
      }
    }
  }
</script>

<style>
	.right {
		float: right;
		position: relative;
		top: 4px;
	}
	
	.recommendHouse {
		position: relative;
		display: flex;
		margin: 10px 0;
	}
	
	.recommendHouseTag {
		border-radius: 3px;
		background: #edf1f4;
		padding: 3px 5px;
		margin-right: 5px;
		font-size: 11px;
	}
	
	.recommendHouseTitle {
		color: #000000;
		font-size: 16px;
	}
	
	.recommendHouseText {
		flex-grow: 1;
		font-size: 12px;
		color: #a1a5ab;
	}
	
	.recommendHouseText > p {
		margin: 10px 0;
	}
	
	.recommendHouseImg {
		position: relative;
		margin-right: 10px;
	}
	
	.recommendHouseImg > view {
		position: relative;
		top: 50%;
		transform: translate(0, -50%);
	}
	
	.recommendHouseImg > view > image {
		border-radius: 3px 10px 10px 10px;
		width: 150px;
		height: 110px;
	}
	
	.recommendHouseImg > view > view {
		border-radius: 3px;
		color: #FFFFFF;
		background: #e45a5a;
		width: 60px;
		font-size: 12px;
		text-align: center;
		position: absolute;
		top: 0px;
		z-index: 2;
		height: 20px;
		line-height: 20px;
	}
	
	.fixed:after {
		content: '';
		display: block;
		clear: both;
	}
</style>
